<template>
	<view class="columnbox wdh-100 bg-co-g jus" :style="{'minHeight':windowHeight+'px'}">
		<template v-if="user.beian<=2">
			<view class="info-box columnbox">
				<view class="title wdh-100">证件图片</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="columnbox card-box" @click="addCardOne">
						<image v-if="cardidzheng==''" src="/static/img/iden1.png" mode="aspectFill"></image>
						<image v-else :src="cardidzheng" mode="aspectFill"></image>
						<view>身份证人像面</view>
					</view>
					<view class="columnbox card-box" @click="addCardTwo">
						<image v-if="cardidfan==''" src="/static/img/iden2.png" mode="aspectFill"></image>
						<image v-else :src="cardidfan" mode="aspectFill"></image>
						<view>身份证国徽面</view>
					</view>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">执业证</view>
				<view class="wdh-100 jus one-info img-list">
					<view v-for="(item,index) in zhiyezheng" :key='index' style="position: relative;">
						<image :src="item.url" mode="aspectFill" class="img-box rowbox"
							@click="deletImg('zhiyezheng',index)">
						</image>
						<u-icon color="#000" name="close-circle-fill"
							style="position: absolute;right: 20rpx;top: 0;background: #fff;border-radius: 100rpx;"></u-icon>
					</view>
					<view class="img-box rowbox" @click="addLogo('zhiyezheng')">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">资格证</view>
				<view class="wdh-100 jus one-info img-list">
					<view style="position: relative;" v-for="(item,index) in zigezheng" :key='index'>
						<image :src="item.url" mode="aspectFill" class="img-box rowbox"
							@click="deletImg('zigezheng',index)">
						</image>
						<u-icon color="#000" name="close-circle-fill"
							style="position: absolute;right: 20rpx;top: 0;background: #fff;border-radius: 100rpx;"></u-icon>
					</view>
					<view class="img-box rowbox" @click="addLogo('zigezheng')">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">职称证</view>
				<view class="wdh-100 jus one-info img-list">
					<view style="position: relative;" v-for="(item,index) in yishizheng" :key='index'>
						<image :src="item.url" mode="aspectFill" class="img-box rowbox"
							@click="deletImg('yishizheng',index)">
						</image>
						<u-icon color="#000" name="close-circle-fill"
							style="position: absolute;right: 20rpx;top: 0;background: #fff;border-radius: 100rpx;"></u-icon>
					</view>
					<view class="img-box rowbox" @click="addLogo('yishizheng')">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">胸牌</view>
				<view class="wdh-100 jus one-info img-list">
					<view style="position: relative;" v-for="(item,index) in xiongpai" :key='index'>
						<image :src="item.url" mode="aspectFill" class="img-box rowbox"
							@click="deletImg('yishizheng',index)">
						</image>
						<u-icon color="#000" name="close-circle-fill"
							style="position: absolute;right: 20rpx;top: 0;background: #fff;border-radius: 100rpx;"></u-icon>
					</view>
					<view class="img-box rowbox" @click="addLogo('xiongpai')">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
			</view>
			<view class="rowbox one-btn-mask" v-if="loadingflag">认证</view>
			<view v-else class="rowbox def-bgcol one-btn" @click="checkInfo">认证</view>
		</template>
		<template v-else>
			<view class="info-box columnbox">
				<view class="title wdh-100">证件图片</view>
				<view class="rowbox wdh-100 spb one-info">
					<view class="columnbox card-box">
						<image :src="user.cardidzheng" mode="aspectFill"></image>
						<view>身份证人像面</view>
					</view>
					<view class="columnbox card-box">
						<image :src="user.cardidfan" mode="aspectFill"></image>
						<view>身份证国徽面</view>
					</view>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">执业证</view>
				<view class="wdh-100 jus one-info img-list">
					<image v-for="(item,index) in zhiyezheng" :key='index' :src="item.url" mode="aspectFill"
						class="img-box rowbox">
					</image>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">资格证</view>
				<view class="wdh-100 jus one-info img-list">
					<image v-for="(item,index) in zigezheng" :key='index' :src="item.url" mode="aspectFill"
						class="img-box rowbox">
					</image>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">职称证</view>
				<view class="wdh-100 jus one-info img-list">
					<image v-for="(item,index) in yishizheng" :key='index' :src="item.url" mode="aspectFill"
						class="img-box rowbox">
					</image>
				</view>
			</view>
			<view class="info-box columnbox">
				<view class="title wdh-100">胸牌</view>
				<view class="wdh-100 jus one-info img-list">
					<image v-for="(item,index) in xiongpai" :key='index' :src="item.url" mode="aspectFill"
						class="img-box rowbox">
					</image>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				city: null,
				showcity: '',
				selectname: '',
				classifyids: '',
				logo: '',
				name: '',
				cardidzheng: '',
				cardidfan: '',
				loadingflag: false,
				zhiyezheng: [],
				zigezheng: [],
				yishizheng: [],
				xiongpai: []
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
			setTimeout(() => {
					this.cardidzheng = this.user.cardidzheng
					this.cardidfan = this.user.cardidfan
					if (this.user.zhiyezheng != '') {
						this.zhiyezheng = this.user.zhiyezheng.split(',').map(i => {
							return {
								flag: false,
								url: i
							}
						})
					}
					if (this.user.zigezheng != '') {
						this.zigezheng = this.user.zigezheng.split(',').map(i => {
							return {
								flag: false,
								url: i
							}
						})
					}
					if (this.user.xiongpai != '') {
						this.xiongpai = this.user.xiongpai.split(',').map(i => {
							return {
								flag: false,
								url: i
							}
						})
					}
					if (this.user.yishizheng != '') {
						this.yishizheng = this.user.yishizheng.split(',').map(i => {
							return {
								flag: false,
								url: i
							}
						})
					}
				},
				1000)
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin() {
				return this.$store.state.isLogin
			}
		},
		methods: {
			deletImg(type, index) {
				if (type == 'zhiyezheng') {
					this.zhiyezheng.splice(index, 1)
				} else if (type == 'zigezheng') {
					this.zigezheng.splice(index, 1)
				} else if (type == 'xiongpai') {
					this.xiongpai.splice(index, 1)
				} else if (type == 'yishizheng') {
					this.yishizheng.splice(index, 1)
				}
			},
			returnBack() {
				uni.navigateBack()
			},
			addCardOne() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.cardidzheng = res.tempFilePaths[0]
					}
				})
			},
			addCardTwo() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.cardidfan = res.tempFilePaths[0]
					}
				})
			},
			addLogo(type) {
				uni.chooseImage({
					count: 1,
					success: res => {
						if (type == 'zigezheng') {
							this.zigezheng.push({
								flag: true,
								url: res.tempFilePaths[0]
							})
						} else if (type == 'xiongpai') {
							this.xiongpai.push({
								flag: true,
								url: res.tempFilePaths[0]
							})
						} else if (type == 'zhiyezheng') {
							this.zhiyezheng.push({
								flag: true,
								url: res.tempFilePaths[0]
							})
						} else {
							this.yishizheng.push({
								flag: true,
								url: res.tempFilePaths[0]
							})
						}
					}
				})
			},
			showClassifiy() {
				if (this.classifyids != '') {
					uni.navigateTo({
						url: '/pages/user/classifiy?classifyids=' + this.classifyids + '&selectname=' + this
							.selectname
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/classifiy'
					})
				}
			},
			chooseCity() {
				uni.navigateTo({
					url: '/pages/user/city'
				})
			},
			checkInfo() {
				this.loadingflag = true
				if (this.cardidzheng == '') {
					uni.showToast({
						title: '请上传身份证人像面',
						icon: 'none'
					})
					this.loadingflag = false
				} else if (this.cardidfan == '') {
					uni.showToast({
						title: '请上传身份证国徽面',
						icon: 'none'
					})
					this.loadingflag = false
				} else if (this.zhiyezheng == '') {
					uni.showToast({
						title: '请上传执业证',
						icon: 'none'
					})
					this.loadingflag = false
				} else if (this.zigezheng == '') {
					uni.showToast({
						title: '请上传资格证',
						icon: 'none'
					})
					this.loadingflag = false
				} else if (this.xiongpai == '') {
					uni.showToast({
						title: '请上传胸牌',
						icon: 'none'
					})
					this.loadingflag = false
				} else if (this.yishizheng == '') {
					uni.showToast({
						title: '请上传职称证',
						icon: 'none'
					})
					this.loadingflag = false
				} else {
					uni.showLoading({
						title: '正在提交',
						mask: true
					})
					this.submitInfo()
				}
			},
			async submitInfo() {
				let zhiyezheng = []
				for (var i = 0; i < this.zhiyezheng.length; i++) {
					zhiyezheng.push(await this.uploadIdenImg(this.zhiyezheng[i]))
				}
				let zigezheng = []
				for (var i = 0; i < this.zigezheng.length; i++) {
					zigezheng.push(await this.uploadIdenImg(this.zigezheng[i]))
				}
				let xiongpai = []
				for (var i = 0; i < this.xiongpai.length; i++) {
					xiongpai.push(await this.uploadIdenImg(this.xiongpai[i]))
				}
				let yishizheng = []
				for (var i = 0; i < this.yishizheng.length; i++) {
					yishizheng.push(await this.uploadIdenImg(this.yishizheng[i]))
				}
				let cardidzheng = this.user.cardidzheng
				if (this.cardidzheng == this.user.cardidzheng) {

				} else {
					cardidzheng = await this.uploadIdenImg({
						flag: true,
						url: this.cardidzheng
					})
				}
				let cardidfan = this.user.cardidfan
				if (this.cardidfan == this.user.cardidfan) {

				} else {
					cardidfan = await this.uploadIdenImg({
						flag: true,
						url: this.cardidfan
					})
				}
				this.$req.post('/doctor/beian', {
					zhiyezheng: zhiyezheng.join(','),
					zigezheng: zigezheng.join(','),
					xiongpai: xiongpai.join(','),
					yishizheng: yishizheng.join(','),
					cardidzheng: cardidzheng,
					cardidfan: cardidfan,
					doctorid: uni.getStorageSync('uid')
				}).then(res => {
					this.$req.post('/doctor/doctorinfo', {
						doctorid: uni.getStorageSync('uid')
					}).then(res => {
						uni.setStorageSync('userinfo', res.data.data)
						this.$store.dispatch('actionsHandleUserInfoChange', res.data
							.data);
						uni.hideLoading()
						this.loadingflag = true
						uni.showModal({
							title: '已提交认证',
							success: () => {
								uni.navigateBack()
							}
						})
					})

				})
			},
			uploadIdenImg(img) {
				return new Promise((resolve, reject) => {
					if (img.flag) {
						this.$req.uploadImg(img.url).then(res => {
							resolve(res.data.data)
						})
					} else {
						resolve(img.url)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-box {
		background: #fff;
		padding: 0 32rpx;
		width: 710rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.title {
		margin-top: 29rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.one-info {
		padding: 32rpx 0;
		border-bottom: #efefef solid 1px;
		font-size: 28rpx;

		input {
			width: calc(100% - 200rpx);
			font-size: 28rpx;
		}

		.sel-box {
			width: calc(100% - 200rpx);
		}
	}


	.img-box {
		width: 190rpx;
		height: 150rpx;
		border-radius: 10rpx;
		background: #f0f0f0;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.one-info>image:nth-child(3) {
		margin-right: 0;
	}

	.info-title {
		width: 200rpx;
	}

	.card-box {
		image {
			width: 280rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}

	.one-btn,
	.one-btn-mask {
		font-size: 30rpx;
		color: #fff;
		width: 710rpx;
		border-radius: 10rpx;
		height: 90rpx;
		margin: 40rpx 0;
	}

	.one-btn-mask {
		background: #f0f0f0;
		color: #acacac;
	}

	.img-list {
		display: flex;
		flex-wrap: wrap;
	}
</style>
<style>
	.no-info {
		color: #cccccc;
	}
</style>